<template>
	<view>
		<a-layout-header>
			<view class="left-row">
				<a-typography-title :level="4" class="header-title">{{mechanismName}}</a-typography-title>
			</view>
			<view class="left-row">
				<image class="logo" src="/static/navbar/logo-front.png"></image>
			</view>
			<view class="center-row">
				<span v-show="isHome" class="navbar-item" @click="$topage('/pages/index/index',{},'close')">
					首页
				</span>

				<unicloud-db v-slot:default="{data, loading, error, options}" collection="news-categories"
					where="show_nav==0" style="display: flex;">
					<view v-if="error">{{error.message}}</view>
					<block v-else>

						<span class="navbar-item" v-for="(item,index) in data" :key="item._id"
							@click="$topage('/pages/article/article',{type:item._id,name:item.name},'close')">
							{{item.name}}
						</span>

					</block>
				</unicloud-db>

				<span class="navbar-item" @click="$topage('/pages/exercise/exercise',{},'close')">
					VIP练习
				</span>
				<a class="navbar-item" href="https://pccms.51bkg.cn/admin/#/">后台管理</a>
				<!-- <a class="navbar-item" style="font-weight: bold;" href="http://cdnysbd.gzsoft.fun/">老练习系统入口</a> -->

			</view>
			<view class="right-row">
				<a-typography-link v-if="isLogin==false" class="right-nav-item"
					@click="$topage('/pages/user/login/login',{},'close')">登录
				</a-typography-link>
				<a-typography-link v-if="isLogin" class="right-nav-item">
					{{isLogin?userInfo.username:'请登录'}}
				</a-typography-link>
				<a-typography-link v-if="isLogin" class="right-nav-item" @click="logout">
					退出
				</a-typography-link>
			</view>
		</a-layout-header>

	</view>

</template>

<script>
	import {
		mapGetters,
		mapActions,
		mapMutations,
		mapState
	} from 'vuex'
	import config from '@/admin.config.js'

	export default {
		name: "topWindow",
		data() {
			return {
				username: ''
			}
		},
		methods: {
			...mapActions({
				setHome: 'app/set_home'
			}),
			...mapMutations({
				removeToken(commit) {
					commit('user/REMOVE_TOKEN')
				}
			}),
			...mapMutations({
				setMechasimName(commit, data) {
					commit('user/SET_MECHANISM_NAME', data)
				}
			}),
			getMechanismName(id) {
				
				const self = this
				if (!this.mechanismName) {
					const db = uniCloud.database()
					db.collection('mechanism').where({
							_id: db.command.eq(id)
						}).field('name').limit(1).get()
						.then(res => {
							console.log(res)
							self.setMechasimName({
								mechanismName: res.result.data[0].name
							})
						})
				}

			},
			requestLogout(){
				const self = this 
				uniCloud.callFunction({
					name:'uni-id-sign-cf',
					data:{
						action:'logout'
					}
				}).then(res=>{
					console.log('logout',res)
					self.mechanismName =''
					self.removeToken()
					uni.reLaunch({
						url: config.login.url
					})
				})
			},
			logout() {
				const self = this
				uni.showModal({
					content: '是否退出?',
					title: '提示',
					success(res) {
						if (res.confirm) {
							self.requestLogout()
						}
					}
				})
			}
		},
		computed: {
			...mapGetters({
				isHome: 'app/ishome',
				isLogin: 'user/isTokenValid'
			}),
			...mapState('user', ['userInfo']),
			...mapState('user', ['mechanismName'])
		},
		mounted() {
			
		},
		beforeUnmount() {
			this.requestLogout()
		},
		watch: {
			userInfo(nv) {
				console.log(nv)
				if (this.userInfo.username) {
					this.username = this.userInfo.username
					this.getMechanismName(this.userInfo.mechanism_id)
				}
			},
			isLogin(nv) {
				// console.log(nv)
				// if (nv) {
				// 	this.username = uni.getStorageSync('lastUsername')
				// 	console.log(this.username)
				// }
			}
		},
		
		setup() {

			// 或者使用 actions
			return {}
		}
	}
</script>

<style>
	@import url("./topwindow.css");

	page {
		color: #fff !important;
	}

	.ant-layout-header {
		display: flex;
		flex-flow: row nowrap;
		color: #fff;
		max-height: 80px;
		height: 80px;
		align-items: center;
		background-color: #06010e;
	}


	.left-row {
		flex: 1;
		display: flex;
		flex-flow: row nowrap;
	}

	.center-row {
		flex: 4;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	.right-row {
		flex: 1;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;

	}

	.right-nav-item {
		margin-left: 6px;
		margin-right: 6px;
		color: #fff;
	}

	.header-title {
		color: #fff !important;
		align-self: center;
	}
</style>
